<template>
    <view v-if="itemDiplay" class="wy-form-text wy-flex-1" :class="[scrollClass,model.theme.box.class]" :style="model.theme.box.style">
        <template v-if="model.showBox">
            <view class="wy-form-group wy-flex-row wy-position-relative">
                <view class="wy-form-group-min-height"></view>
                <view :class="[model.theme.group.class,model.multiline?'wy-flex-column':'wy-flex-row wy-align-center']" :style="model.theme.group.style" class="wy-flex-1 wy-form-group-content">
                    <view class="wy-form-group-title wy-flex-row  wy-align-center" v-if="model.title" :class="[model.theme.titleBox.class,titleMinWidth,model.multiline?'':'wy-justify-end']" :style="model.theme.titleBox.style">
                        <text class="wy-size-base wy-color-text" :class="[model.theme.title.class]" :style="model.theme.title.style">{{locale(model.title)}}</text> 
                        <text class="wy-size-base wy-color-text" :class="[model.theme.sp.class]" v-if="model.sp">{{model.sp}}</text>
                    </view>
					<view v-if="model.multiline && model.remark" class="wy-flex-column">
						<text class="wy-size-s wy-color-second" v-for="(remark,index) in remarkArr" :key="index">{{remark}}</text>
					</view>
                    <view class="wy-flex-1 wy-flex-row wy-align-center wy-ps-tb-ss">
                        <picker 
                        v-if="model.mode == 'date' || model.mode == 'time'"
                        :mode="model.mode" 
                        :fields="model.fields"
                        :value="model.mode=='date'?model.datetime.date:model.datetime.time"
                        :start="model.mode=='date'?'1000-01-01':'00:00'"
                        :end="model.mode=='date'?'9999-09-01':'24:00'"
                        @change="bindDateOrTimeChange"
                        class="wy-form-group-input wy-flex-1 wy-flex-column wy-justify-center"
                        :class="[model.theme.input.class,validateClass,model.disabled?'wy-form-group-disabled':'']"
                        :style="model.theme.input.style"
                        :disabled="model.disabled"
                        >
                        <view class="wy-flex-row wy-flex-1 wy-ps-tb-ss wy-flex-wrap">
                        	<view class="wy-flex-1 wy-flex-row">
                        		<text class="wy-form-group-placeholder wy-size-base" v-if="(model.mode == 'date' && !model.datetime.date)||(model.mode == 'time' && !model.datetime.time)">
                        			{{locale(model.placeholder)}}
                        		</text>
                        		<view class="wy-flex-1 wy-flex-row wy-flex-wrap">
                        			<!-- #ifdef APP-NVUE -->
                        			<text style="width: 1rpx;" class="wy-flex-1 wy-color-text wy-size-base wy-lines wy-lines-wrap wy-lines-1">{{model.mode == 'date'?model.datetime.date:model.datetime.time}}</text> 
                        			<!-- #endif -->
                        			<!-- #ifndef APP-NVUE -->
                        			<text style="width: 1rpx;" class="wy-flex-1 wy-color-text wy-size-base wy-lines wy-lines-wrap">{{model.mode == 'date'?model.datetime.date:model.datetime.time}}</text> 
                        			<!-- #endif -->
                        		</view> 
                        	</view>
                        	<wy-icon name="calendar" :stop="false"></wy-icon>
                        </view>
                        </picker>
                        <view v-else-if="model.mode == 'datetime'" :class="validateClass" class="wy-flex-row wy-flex-1">
                            <picker 
                            mode="date"
                            :value="model.datetime.date"
                            :fields="model.fields"
                            start="1000-01-01"
                            end="9999-09-01"
                            @change="bindDateChange"
                            class="wy-form-group-input wy-flex-1  wy-flex-column wy-justify-center"
                            :class="[model.theme.input.class,model.disabled?'wy-form-group-disabled':'']"
                            :style="model.theme.input.style"
                            :disabled="model.disabled"
                            >
                            <view class="wy-flex-row wy-flex-1 wy-ps-tb-ss wy-flex-wrap">
                            	<view class="wy-flex-1 wy-flex-row">
                            		<text class="wy-form-group-placeholder wy-size-base" v-if="!model.datetime.date">
                            			{{locale(model.placeholder)}}
                            		</text>
                            		<view class="wy-flex-1 wy-flex-row wy-flex-wrap">
                            			<!-- #ifdef APP-NVUE -->
                            			<text style="width: 1rpx;" class="wy-flex-1 wy-color-text wy-size-base wy-lines wy-lines-wrap wy-lines-1">{{model.datetime.date}}</text> 
                            			<!-- #endif -->
                            			<!-- #ifndef APP-NVUE -->
                            			<text style="width: 1rpx;" class="wy-flex-1 wy-color-text wy-size-base wy-lines wy-lines-wrap">{{model.datetime.date}}</text> 
                            			<!-- #endif -->
                            		</view> 
                            	</view>
                            	<wy-icon name="calendar" :stop="false"></wy-icon>
                            </view>
                            </picker> 
                            <view class="wy-flex-row wy-align-center wy-justify-center wy-ps-lr-s">
                                <text class="wy-size-base wy-color-text">-</text>
                            </view>
                            <picker 
                            mode="time" 
                            :value="model.datetime.time"
                            start="00:00"
                            end="24:00"
                            @change="bindTimeChange"
                            class="wy-form-group-input wy-flex-1  wy-flex-column wy-justify-center"
                            :class="[model.theme.input.class,model.disabled?'wy-form-group-disabled':'']"
                            :style="model.theme.input.style"
                            :disabled="model.disabled"
                            >
                            <view class="wy-flex-row wy-flex-1 wy-ps-tb-ss wy-flex-wrap">
                            	<view class="wy-flex-1 wy-flex-row">
                            		<text class="wy-form-group-placeholder wy-size-base" v-if="!model.datetime.time">
                            			{{locale(model.placeholder)}}
                            		</text>
                            		<view class="wy-flex-1 wy-flex-row wy-flex-wrap">
                            			<!-- #ifdef APP-NVUE -->
                            			<text style="width: 1rpx;" class="wy-flex-1 wy-color-text wy-size-base wy-lines wy-lines-wrap wy-lines-1">{{model.datetime.time}}</text> 
                            			<!-- #endif -->
                            			<!-- #ifndef APP-NVUE -->
                            			<text style="width: 1rpx;" class="wy-flex-1 wy-color-text wy-size-base wy-lines wy-lines-wrap">{{model.datetime.time}}</text> 
                            			<!-- #endif -->
                            		</view> 
                            	</view>
                            	<wy-icon name="calendar" :stop="false"></wy-icon>
                            </view>
                            </picker>
                        </view> 
                        <view @click="unitClick" v-if="showUnit||model.unit.length||model.theme.unit.class||model.theme.unit.style" :class="[model.theme.unit.class]" :style="model.theme.unit.style" class="unit wy-ms-left-ss">
                        	<slot name="unit"></slot>
                            <text class="wy-color-text wy-size-base">{{locale(model.unit)}}</text>
                        </view>
						<view v-if="showRest" :class="[model.theme.reset.class]" :style="model.theme.reset.style" class="wy-ms-left-ss">
							<slot name="reset"></slot>
						    <wy-icon @iconClicked="resetClick" name="delete" type="info"></wy-icon> 
						</view>
                        <view class="wy-ms-left-ss" v-if="model.tip">
                            <wy-icon @iconClicked="showTip" name="warn" type="error"></wy-icon> 
                        </view>
						<view class="wy-ms-left-ss" v-if="!model.multiline && model.remark">
						    <wy-icon @iconClicked="showRemark" name="question" type="error"></wy-icon>
						</view>
                    </view> 
                </view> 
            </view>
        </template>
        <template v-else>
            <!--自定义样式内容区--> 
            <slot></slot>
             <!----> 
        </template> 
    </view>
</template>

<script>
    import {wyProps} from '../../libs/props.js';
    import {wyItem} from '../../libs/form.js'; 
	import {wy,pubfn} from '../../libs/context.js'
    export default { 
         name:'wy-form-demo', 
         mixins: [wyProps,wyItem],
         data(){
             return {
                model:{
                    theme:{
                        box:{class:'',style:''},
                        group:{class:'',style:''}, 
                        titleBox:{class:'',style:''},
                        title:{class:'',style:''},
                        input:{class:'',style:''},
                        sp:{class:'',style:''},
                        unit:{class:'',style:''},
						reset:{class:'',style:''}
                    },
                    /* 系统内置属性
                    //公共属性
                    uuid:'',//实例key
                    name:'',//表单key 
                    title:'',//标题
                    value:'', //值
                    tip:'',//提示语
                    tipType:'',//提示类型
                    disabled:false,//是否禁用
                    display:true,//是否展示
                    focus:false,//是否有焦点
                    multiline:false,//是否分行
                    //公共事件
                    checkCommit:null,//提交前置条件检查
                    showTip:null,//弹出提示信息
                    callback:null,  //set事件监听 
                    //事件
                    events:{
                        click:null,
                        unitClick:null,
                        input:null
                    }, 
                    //国际化
                    locale:{ //本地化
                    	group:'',
                        file:'',
                    	isContent:true,
                    	open:false
                    },
                    //辅助
                    sp:'',// :标题与值之间分隔符，
                    width:0,//标题最大宽度，0代表自动判断
                    unit:'',//单位
                    placeholder:'',// 
                    */
                    //自定义属性
                    showContent:true,//是否展示内容区
                    showBox:true ,//是否显示内容区 
                    mode:'date',//datetime datedate date time
                    valueType:'string',//string,number,object,结果是时间戳、字符串
                    fields:'day',//有效值 year、month、day，表示选择器的粒度，默认为 day
                    datetime:{
                    	date:'',
                    	time:'',
                    },//时期和时间
                    timestamp:{
                    	date:0,
                    	time:0
                    },//时间戳
                    showWeek:false,
                    datetimeformat:'YYYY-MM-DD hh:mm:ss',
                    dateformat:'YYYY-MM-DD',
                    timeformat:'hh:mm', 
                    autoValue:true ,//是否自动初始赋值
                    showReset:false,//是否展示重置按钮
                    //resetValue:'',//重置值 
                    
                }
             }
         }, 
         computed:{ 
             //itemDiplay 组件是否隐藏
             //titleMinWidth //自动计算出来的标题宽度
             //validateClass //触发验证的样式类
			showRest(){
				return this.model.showReset
			}
         }, 
         methods:{ 
            //mounted事件
            mounted__(){
               // console.log(this.model) 
			   //this.setValue__(this.model.value,{source:'form'}) 
            },
			// 数据加载完毕
			init__(){
				let {value,autoValue,valueType} = this.model
				if(!value && autoValue){
					this.model.value = pubfn.unix()
				}
				this.setValue__(this.model.value,{source:'form'}) 
			},
            //locale(key) 国际化方法
            //来自父节点的状态通知
            parentNotice__(e){
                
            },
            //外部设置model事件
            setModel__(model){
                
            },
            //获取值
            getValue__(){
                let {value,mode}=this.model
                return value
            },
            //设置值
            setValue__(value,ontion={}){
                let {source} = ontion
				let {mode,valueType,autoValue,dateformat,timeformat} = this.model
				if(value){
					if(source != 'self'){
						var dateval = pubfn.formatTime(value,dateformat+'|'+timeformat)
						if(dateval){
							var sps = dateval.split('|')
							if(sps.length==2){
								this.model.datetime.date =sps[0]
								this.model.datetime.time =sps[1]
							} 
						} 
					}
					if(mode == 'datetime' && valueType == 'string'){
						value = this.model.datetime.date+' '+this.model.datetime.time
					} 
				}
				else{
					this.model.datetime.date = ''
					this.model.datetime.time = ''
				}
				if(valueType == 'number' && !pubfn.isNumber(value)){
					value = pubfn.unix(value)
				}
				this.model.value = value
				
            },
            //提交前的同步验证
            async checkCommit(option,parent=null,group=''){
            	return new Promise((resolve, reject)=>{
            		resolve({error:[],group})
            	})
            }, 
            bindDateOrTimeChange(e){
                let {mode}= this.model
                if(mode == 'date'){
                    this.bindDateChange(e)
                }
                else if(mode == 'time'){
                    this.bindTimeChange(e)
                }
            },
            bindDateChange(e){ 
                let {value}=e.detail 
                this.model.datetime.date = value
                this.setValue(value,{source:'self'})
            },
            bindTimeChange(e){
                let {value}=e.detail 
                this.model.datetime.time = value
                this.setValue(value,{source:'self'})
            },
			resetClick(){
				let {resetValue}=this.model
				if(resetValue==undefined){
					resetValue=''
				}
				this.setValue__(resetValue,{source:'form'}) 
			} 
         }
        
    }
</script>

<style>

</style>
